<template>
	<view class=" block margin-top margin-line">
		<view class="block bg-white padding-xs padding-left margin-bottom" v-for="(item, index) in datas" :key="index">
			<view class="flex padding-bottom-sm padding-top-sm">
				<view class="size-44" :class="[item.checked ? 'cuIcon-roundcheckfill text-green' : 'cuIcon-round text-gray']" @click="CheckboxChange" :data-index="index"></view>
				<view class="title margin-left-sm">
					<text class="text-black size-32 cuIcon-shop margin-left-xs margin-right-xs"></text>
					<text class="shop-title">{{ item.title }}</text>
					<text class="text-black cuIcon-right margin-left-xs margin-right-xs"></text>
				</view>
			</view>
			<view class="bg-white block margin-top margin-line">
				<view class="solid-bottom flex padding-sm" v-for="(childitem, childindex) in item.list" :key="childindex">
					<view class="checkbox-boxs">
						<view
							class="size-44"
							:class="[childitem.checked ? 'cuIcon-roundcheckfill text-green' : 'cuIcon-round text-gray']"
							@click="CheckboxGoodsChange"
							:data-findex="index"
							:data-index="childindex"
						></view>
					</view>
					<view class="flex-twice item-img bg-img" :style="'background-image: url(' + childitem.img + ')'" @click.stop="onClickItem" :data-index="childindex"></view>
					<view class="flex-treble padding-sm padding-left ">
						<view class="text-bold text-black-dark text-size-28 text-title">{{ childitem.name }}</view>
						<view class="flex solid-bottom justify-between bg-grey-light padding-xs border-radius-14 text-grey-dark margin-top-xs" @click="OnSelect" :data-findex="index" :data-index="childindex">
							<view class="margin-left-xs text-grey-dusky text-size-26">
								<text>{{ childitem.bg }}</text>
								/
								<text>{{ childitem.styles }}</text>
							</view>
							<view class="margin-right-xs"><text class="cuIcon-unfold"></text></view>
						</view>
						<view class="flex solid-bottom justify-between margin-top-sm">
							<view class="flex justify-center align-center">
								<text class="text-black-dark text-size-26">￥</text>
								<text class=" text-bold text-black-dark text-size-32">{{ childitem.price }}</text>
							</view>
							<view class="flex bg-gray boxs-sum  align-center">
								<view class="flex-sub boxs-sum-char  padding-xs" @click="OnSub" :data-findex="index" :data-index="childindex">-</view>
								<view class="flex-twice boxs-sum-number padding-xs">{{ childitem.number }}</view>
								<view class="flex-sub boxs-sum-char padding-xs" @click="OnAdd" :data-findex="index" :data-index="childindex">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			productlist: [],
			values: []
		};
	},
	props: {
		datas: Array,
		color: {
			default: '#2DAD3F'
		},
		introlimit: {
			default: 40
		},
		mold: {
			type: [String, Boolean],
			default: true
		},
		Bgcolor: {
			type: String,
			default: 'blue'
		},
		allselect: {
			type: [String, Boolean],
			default: false
		},
		defaults:Array
	},
	created() {
		this.productlist = this.datas;
		this.values = this.defaults;
		this.trim();
	},
	watch: {
		productlist: function(v_new, v_old) {
			console.log(v_old);
			this.productlist = v_new;
		},
		allselect: function(v_new, v_old) {
			this.trim(v_new);
		}
	},
	methods: {
		trim:function(type) {
			for (let index in this.productlist) {
				this.productlist[index].checked = type;
				for (let j = 0, lenJ = this.productlist[index].list.length; j < lenJ; ++j) {
					this.productlist[index].list[j].checked = this.productlist[index].checked;
					this.refreshArray(index, j);
				}
			}
		},
		onClickItem:function(e) {
			var index = e.currentTarget.dataset.index;
			this.$emit('onclick', index);
		},
		CheckboxChange:function(e) {
			let index = e.currentTarget.dataset.index;
			this.productlist[index].checked = !this.productlist[index].checked;
			for (let j = 0, lenJ = this.productlist[index].list.length; j < lenJ; ++j) {
				this.productlist[index].list[j].checked = this.productlist[index].checked;
				this.refreshArray(index, j);
			}
			this.onChange();
		},
		CheckboxGoodsChange:function(e) {
			var index = e.currentTarget.dataset.index;
			var findex = e.currentTarget.dataset.findex;
			this.productlist[findex].list[index].checked = !this.productlist[findex].list[index].checked;
			this.refreshArray(findex, index);
			this.onChange();
		},
		OnSub:function(e) {
			var index = e.currentTarget.dataset.index;
			var findex = e.currentTarget.dataset.findex;
			let lists = this.productlist[findex].list[index];
			if (lists.number > 0) {
				lists.number--;
				this.productlist[findex].list[index] = lists;
			}
			this.onChange();
		},
		OnAdd:function(e) {
			var index = e.currentTarget.dataset.index;
			var findex = e.currentTarget.dataset.findex;
			let lists = this.productlist[findex].list[index];
			lists.number++;
			this.productlist[findex].list[index] = lists;
			this.onChange();
		},OnSelect:function(e){
			var index = e.currentTarget.dataset.index;
			var findex = e.currentTarget.dataset.findex;
			let param = {
				findex: findex,
				index: index
			};
			this.$emit('onselect', param);
		},
		onChange: function() {
			let param = {
				lists: this.productlist,
				values: this.values
			};
			this.$emit('onchange', param);
		},
		refreshArray: function(index, j) {
			let valueIndex = this.values.indexOf(this.productlist[index].list[j].value);
			if (this.productlist[index].list[j].checked) {
				if (valueIndex == -1) {
					this.values.push(this.productlist[index].list[j].value);
				}
			} else {
				if (valueIndex > -1) {
					this.values.splice(valueIndex, 1);
				}
			}
		}
	}
};
</script>

<style scoped>
.m-shadow {
	box-shadow: 0px 4px 21px 0px rgba(67, 67, 67, 0.14);
}

.inline {
	display: inline-block;
}

.item-img {
	border-radius: 8upx;
	width: 170upx;
}

.item-info {
	border-top-right-radius: 20upx;
	border-bottom-right-radius: 20upx;
}

.cuIcon {
	font-size: 125%;
	padding: 10upx 10upx;
	border-radius: 8upx;
}

.text-del {
	text-decoration: line-through;
}
.shop-title {
	font-size: 32upx;
	font-family: PingFang;
	font-weight: bold;
	color: rgba(3, 2, 20, 1);
	line-height: 36upx;
}
.text-title {
	font-size: 28upx;
	font-family: PingFang;
	font-weight: bold;
	color: rgba(3, 2, 20, 1);
	line-height: 42upx;

	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
}

.cu-linear-btn {
	font-size: 26upx;
	font-family: PingFang;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 50upx;
	width: 180upx;
	height: 50upx;
	background: linear-gradient(108deg, rgba(106, 46, 224, 1), rgba(242, 61, 182, 1));
	box-shadow: 0upx 2upx 13upx 0upx rgba(146, 50, 212, 0.5);
	border-radius: 25upx;
}

.checkbox-boxs {
	align-items: center;
	line-height: 170upx;
	margin-right: 34upx;
}

.cuIcon-shopfill {
	font-size: 32upx;
}
</style>
